<template>
  <el-menu :default-active="currentTap" mode="horizontal" class="community-top-component" @select="handleSelect">
    <el-menu-item index="0" @click="switchView('community')">
      社区动态
    </el-menu-item>

    <el-menu-item index="1" @click="switchView('post')">
      发布日常
    </el-menu-item>
  </el-menu>


  <!-- <div class="community-top-component">

    <el-button type="primary" class="big-emphasized-button" @click="switchView('community')">
      社区动态
    </el-button>
    <el-button type="success" class="big-emphasized-button" @click="switchView('post')">
      发布日常
    </el-button>
  </div> -->
</template>
  
  <script>
  import { Button } from 'element-plus';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';

  export default {
    name: 'CommunityTopComponent',
    components: {
      ElButton: Button,
    },
    props: {
      currentView: {
        type: String,
        default: 'community',
      },
      currentTap: {
        type: String,
        default: '0',
      },
    },

    //视图切换
    //FIXME

    methods: {
      switchView(view) {
        this.$emit('update:view', view);
      },

      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      }
    },
  };
  </script>
  
<style scoped>

  .community-top-component {
    display: flex;
    justify-content: center;
  }

  .big-emphasized-button {
    font-size: 28px;
    /* 进一步增大字体大小 */
    padding: 30px 60px;
    /* 进一步增大内边距 */
    margin: 0 25px;
    /* 调整按钮之间的间距 */
    border-radius: 50px;
    /* 增大圆角边框 */
    background-color: #ffa726;
    /* 使用温暖的背景色 */
    color: #ffffff;
    /* 保持文本颜色为白色，确保可读性 */
    border: none;
    /* 去掉边框 */
    transition: box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 8px 16px rgba(255, 167, 38, 0.6);
    /* 增大并调整阴影 */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    /* 添加文本阴影，增强立体感 */
    letter-spacing: 1px;
    /* 微调字间距，提升视觉效果 */
  }

  .big-emphasized-button:hover,
  .big-emphasized-button:focus {
    background-color: #ff9800;
    /* 悬停时的背景色 */
    box-shadow: 0 10px 20px rgba(255, 167, 38, 0.8);
    /* 悬停时阴影加深 */
    transform: translateY(-5px) scale(1.05);
    /* 鼠标悬浮时上移并放大 */
  }

  /* 移除Element Plus按钮的默认渐变色背景 */
  .el-button {
    background-image: none;
    /* 确保没有背景渐变 */
  }

  /* 可选：添加更明显的悬停效果 */
  .big-emphasized-button:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .big-emphasized-button:hover::after {
    opacity: 1;
  }
</style>